import React, { FormEvent, useState } from "react";
import { RegisterUser } from "../actions/UserActions";

export const Register: React.FC = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    if (name === "") {
      alert("Name required!");
      return;
    }
    if (email === "") {
      alert("Email required!");
      return;
    }
    if (password === "") {
      alert("Password required!");
      return;
    }
    RegisterUser(name, email, password);
  };

  return (
    <>
      <div className="register">
        <div className="auth-form-container">
          <h2 className="auth-form-header">Sign Up with NUS Fellowmark!</h2>

          <form className="register-form" onSubmit={handleSubmit}>
            <label htmlFor="name">Name</label>
            <input
              value={name}
              name="name"
              onChange={(e) => setName(e.target.value)}
              id="name"
              placeholder="full name"
              required
            />
            <label htmlFor="email">Email</label>
            <input
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              type="email"
              placeholder="userID@u.nus.edu"
              id="email"
              name="email"
              required
            />
            <label htmlFor="password">Password</label>
            <input
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              type="password"
              placeholder="********"
              id="password"
              name="password"
              pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
              title="Must contain ALPHANUMERIC characters with at least one UPPERCASE letter, and min. 8 characters long" required
            />
            <button className="Button" type="submit">
              Register
            </button>
          </form>

          <a href="/login">
            <button className="login-register-link-btn">
              Already have an account? Login here.
            </button>
          </a>
        </div>

        <footer className="privacy-notice">
          <p>
            This site uses cookies. By continuing to use this site, you agree to
            our use of cookies. For more details, please see our{" "}
            <a href="https://www.nus.edu.sg/privacy-notice/">Privacy Policy</a>
          </p>
        </footer>
      </div>
    </>
  );
};
